<script setup lang="ts">
import {ref} from 'vue'
import { useRouter } from 'vue-router'
const words = ref('')

// 获取路由实例
const router = useRouter()
const goSearch = () => {
  // 1. path路径跳转语法
  //  1.1 简单写法
 //   router.push('/路径?参数名1=参数值1&参数2=参数值2')
// 1.2 完整写法
  // router.push({
  //   path: '/路径',
  //   query: {
  //     参数名1: '参数值1',
  //     参数名2: '参数值2'
  //   }
  // })
  // router.push({
  //   path:'/search'
  // })
  // router.push(`/search?words=${words.value}`)
  // router.push({
  //   path: '/search',
  //   query: {
  //     words:words.value
  //   }
  // })

  // 动态路由传参
  // router.push(`/search/${words.value}`)
  // 2. name命名路由跳转
  // router.push({
  //   name:'search'
  // })
  // router.push({
  //   name: 'search',
  //   query: {
  //     words:words.value
  //   }
  // })
  router.push({
    name: 'search',
    params: {
      words:words.value
    }
  })

}

</script>

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" v-model="words">
      <button @click="goSearch" >搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <!-- 带参数传值 -->
      <a>黑马程序员</a>
      <a>前端培训</a>
      <a>如何成为前端大牛</a>
    </div>
  </div>
</template>

<style scoped>
.logo-box {
  height: 150px;
  /* background: url('@/assets/logo.jpeg') no-repeat center; */
}

.search-box {
  display: flex;
  justify-content: center;
}

.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-box input:focus {
  border: 2px solid #ad2a26;
}

.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}

.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}

.hot-link a {
  margin: 0 5px;
}
</style>